<template>
  <div id="vipCodeManagePage">
    <a-flex justify="space-between">
      <h2>VIP 兑换码管理</h2>
      <a-space>
        <!-- 控制新增弹窗的显示 -->
        <a-button type="primary" @click="showAddModal = true">+ 创建兑换码</a-button>
      </a-space>
    </a-flex>

    <div style="margin-bottom: 16px" />

    <!-- 搜索表单 -->
    <a-form layout="inline" :model="searchParams" @finish="doSearch">
      <a-form-item label="兑换码类型">
        <a-select
          v-model:value="searchParams.type"
          style="min-width: 180px"
          placeholder="请选择兑换码类型"
          :options="VIP_CODE_TYPE_OPTIONS"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="兑换码状态" name="status">
        <a-select
          v-model:value="searchParams.status"
          :options="VIP_CODE_STATUS_OPTIONS"
          placeholder="请选择兑换码状态"
          style="min-width: 180px"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="用户 ID">
        <a-input v-model:value="searchParams.userId" placeholder="请输入用户 ID" allow-clear />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <div style="margin-bottom: 16px" />
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'type'">
          <div>{{ VIP_CODE_TYPE_MAP[record.type] }}</div>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag :color="record.status === 0 ? 'green' : 'red'">
            {{ VIP_CODE_STATUS_MAP[record.status] }}
          </a-tag>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-if="column.dataIndex === 'editTime'">
          {{ dayjs(record.editTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </template>
    </a-table>

    <!-- 新增兑换码弹窗 -->
    <a-modal
      v-model:visible="showAddModal"
      title="批量创建兑换码"
      @ok="handleAddModalOk"
      @cancel="showAddModal = false"
    >
      <a-form :model="addVipCodeForm" layout="vertical">
        <a-form-item label="创建数量">
          <!-- 可编辑的输入框 -->
          <a-input-number
            v-model:value="addVipCodeForm.count"
            placeholder="请输入数量"
            :min="1"
            :max="100"
            :step="1"
          />
        </a-form-item>
        <a-form-item label="兑换码类型">
          <a-select
            v-model:value="addVipCodeForm.type"
            style="min-width: 180px"
            placeholder="请选择兑换码类型"
            :options="VIP_CODE_TYPE_OPTIONS"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { listVipCodeByPageUsingPost, batchAddVipCodeUsingPost } from '@/api/vipCodeController.ts';
import {
  VIP_CODE_STATUS_MAP,
  VIP_CODE_STATUS_OPTIONS,
  VIP_CODE_TYPE_MAP,
  VIP_CODE_TYPE_OPTIONS
} from '@/constants/vipCode.ts';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '兑换码',
    dataIndex: 'code',
  },
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '用户 ID',
    dataIndex: 'userId',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '编辑时间',
    dataIndex: 'editTime',
  },
];

// 数据列表
const dataList = ref<API.VipCode[]>([]);
const total = ref(0);

// 搜索条件
const searchParams = reactive<API.VipCodeQueryRequest>({
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'descend',
});

// 新增兑换码表单对象
const addVipCodeForm = reactive<API.VipCodeBatchAddRequest>({
  type: 0, // 默认为 SVIP
  count: 10, // 默认数量为 10
});

// 控制新增弹窗显示
const showAddModal = ref(false);

// 获取数据
const fetchData = async () => {
  const res = await listVipCodeByPageUsingPost({
    ...searchParams,
  });
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? [];
    total.value = res.data.data.total ?? 0;
  } else {
    message.error('获取数据失败，' + res.data.message);
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchData();
});

// 分页参数
const pagination = computed(() => ({
  current: searchParams.current,
  pageSize: searchParams.pageSize,
  total: total.value,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
}));

// 表格变化后重新获取数据
const doTableChange = (page: any) => {
  searchParams.current = page.current;
  searchParams.pageSize = page.pageSize;
  fetchData();
};

// 搜索数据
const doSearch = () => {
  searchParams.current = 1;
  fetchData();
};

// 处理新增兑换码
const handleAddModalOk = async () => {
  const res = await batchAddVipCodeUsingPost(addVipCodeForm);
  if (res.data.code === 0) {
    message.success('创建成功');
    showAddModal.value = false;
    fetchData(); // 刷新列表
  } else {
    message.error('创建失败：' + res.data.message);
  }
};
</script>

<style scoped>
#vipCodeManagePage {
  max-width: 1200px;
  margin: 0 auto;
}
</style>
